<!DOCTYPE HTML>
<html lang="en">
<head>
    <link rel="icon" href="img/jbpm_icon.png">
    <title>jBPM - Build your business application</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/jquery-editable-select.min.css">
    <link rel="stylesheet" href="css/jbpm.css">
    <link rel="stylesheet" href="css/c3.css">
    <link rel="stylesheet" href="css/font-awesome/css/all.min.css">
    <link href="https://fonts.googleapis.com/css?family=Encode+Sans+Condensed" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-editable-select.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/d3.v5.min.js" charset="utf-8"></script>
    <script src="js/c3.min.js"></script>
</head>
<body>
	<div id="container" style="display: block !important;">
		<nav class="navbar navbar-light bg-light">
			<div class="col-sm-12 text-center jbpm-card-body">
				<h2>
					<strong>Reports</strong> for generated applications via <strong>start.jbpm.org</strong>
				</h2>
			</div>
		</nav>
		<br />

		<div class="row" style="width: 70%; margin-left: 15%">
			<div class="col-sm-4">
				<div class="card text-center" style="width: 25rem;">
					<div class="card-header">Total generated applications</div>
					<div class="card-body">
						<p class="card-text text-center">
							<b><span id="totalApps"></span></b>
						</p>
					</div>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="card text-center" style="width: 25rem;">
					<div class="card-header">Generated applications today</div>
					<div class="card-body">
						<p class="card-text text-center">
							<b><span id="todayApps"></span></b>
						</p>
					</div>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="card text-center" style="width: 25rem;">
					<div class="card-header">Generation errors</div>
					<div class="card-body">
						<p class="card-text text-center">
							<b><span id="totalErrors"></span></b>
						</p>
					</div>
				</div>
			</div>
		</div>
		<br />


		<nav class="navbar navbar-light bg-light">
			<div class="col-sm-12 text-center jbpm-card-body">
				<h2>
					<strong>Charts</strong> for generated business applications
				</h2>
			</div>
		</nav>
		<br /> <br />
		<div class="row" style="width: 70%; margin-left: 15%">

			<div class="col-sm-6">
				<div id="chart-recent-per-day"></div>
			</div>

			<div class="col-sm-6">
				<div id="chart-per-type"></div>
			</div>

		</div>
		<br /> <br />
		<div class="row" style="width: 70%; margin-left: 15%">

			<div class="col-sm-6">
				<div id="chart-per-version"></div>
			</div>

			<div class="col-sm-6">
				<div id="chart-per-options"></div>
			</div>

		</div>
		<br /> <br />
		<div class="row" style="width: 70%; margin-left: 15%">

			<div class="col-sm-6">
				<div id="chart-per-gentype"></div>
			</div>
		</div>
		<br />
		<br />
		<footer class="page-footer font-small jbpmfooter text-center">
			<a href="http://jbpm.org/" target="_blank"><img
				src="img/provided_by_jbpm.png" alt="Provided by jBPM" width="180px"
				height="68px"></a> &nbsp;&nbsp;&nbsp; <a
				href="https://www.openshift.com/" target="_blank"><img
				src="img/powered_by_openshift.png" alt="Powered by OpenShift Online"
				width="180px" height="48px"></a>
		</footer>
	</div>

	<script>
		function loadBarChart(apps, dates) {
			var bchart = c3.generate({
				bindto : '#chart-recent-per-day',
				data : {
					columns : [ apps ],
					type : 'bar'
				},
				axis : {
					x : {
						type : 'category',
						categories : dates
					}
				}
			});
		}

		function loadPieChart(ba, dm, bo) {
			var pchart = c3.generate({
				bindto : '#chart-per-type',
				data : {
					columns : [ [ 'Business Automation', ba ],
							[ 'Decision Management', dm ],
							[ 'Business Optimisation', bo ] ],
					type : 'pie'
				},
				  pie: {
					    label: {
					      format: function(value, ratio, id) {
					        return value;
					      }
					    }
					  }
			});
		}
		
		function loadPieVersionsChart(byVersion) {
			var pchart = c3.generate({
				bindto : '#chart-per-version',
				data : {
					columns : byVersion,
					type : 'pie'
				},
				  pie: {
				    label: {
				      format: function(value, ratio, id) {
				        return value;
				      }
				    }
				  }
			});
		}
		
		function loadPieOptionsChart(byOptions) {
			var pchart = c3.generate({
				bindto : '#chart-per-options',
				data : {
					columns : byOptions,
					type : 'pie'
				},
				  pie: {
					    label: {
					      format: function(value, ratio, id) {
					        return value;
					      }
					    }
					  }
			});
		}

        function loadPieGenTypeChart(byGenType) {
            var pchart = c3.generate({
                bindto : '#chart-per-gentype',
                data : {
                    columns : byGenType,
                    type : 'pie'
                },
                pie: {
                    label: {
                        format: function(value, ratio, id) {
                            return value;
                        }
                    }
                }
            });
        }

		$(document)
				.ready(
						function() {
							$.get(window.location.protocol + "//"
									+ window.location.host
									+ "/rest/reports/stats", function(data,
									status) {

								$('#totalApps').text(data[0]);
								$('#todayApps').text(data[1]);
								$('#totalErrors').text(data[2]);

							});

							$.get(window.location.protocol + "//"
									+ window.location.host
									+ "/rest/reports/types", function(data,
									status) {

								loadPieChart(data['bpm'], data['brm'],
										data['planner']);

							});

							$.get(window.location.protocol + "//" + window.location.host + "/rest/reports/apps", function(data, status) {

								var apps = data['apps'];
								apps.unshift('Number of generated applications');

								var dates = data['dates'];

								loadBarChart(apps, dates);

							});
							
							$.get(window.location.protocol + "//"
									+ window.location.host
									+ "/rest/reports/versions", function(data,
									status) {

								loadPieVersionsChart(data);

							});
							
							$.get(window.location.protocol + "//"
									+ window.location.host
									+ "/rest/reports/options", function(data,
									status) {

								loadPieOptionsChart(data);

							});

                            $.get(window.location.protocol + "//"
                                    + window.location.host
                                    + "/rest/reports/gentypes", function(data,
                                    status) {

                                var chartData = [];
                                var totalWeb = 0, totalRest = 0, totalAll = 0;

                                data.map( function(item) {
									if(item[0] == 'web') {
									    totalWeb = item[1];
									} else if(item[0] == 'rest') {
                                        totalRest = item[1];
									} else if(item[0] == 'total') {
                                        totalAll = item[1];
									}
                                });

                                chartData.push(['web', totalAll - totalRest]);
                                chartData.push(['rest', totalRest]);

                                loadPieGenTypeChart(chartData);

                            });

						});
	</script>


</body>
</html>